<template>
	<m-layout2 :title="type == 2 ? '修改银行卡' : '添加银行卡'" gap="24" class="bank-card">
		<m-block gap="30 30 0" :isBg="true">
			<view class="head flex-column ai-center">
				<m-image2 class="mb-24" :size="[280, 181]" src="../../../static/images/pages/mine/card.png" mode="" />
				<text class="fs33 fw-600">{{ type == 2 ? '修改银行卡' : '添加银行卡' }}</text>
				<text class="fs24 mt-12 text-red" v-if="from.cardtype == 1">*请绑定个人账号 银行卡</text>
				<text class="fs24 mt-12 text-red" v-if="from.cardtype == 2">*请绑定对公账号 银行卡</text>
			</view>
			<view class="ul">
				<view class="li">
					<text>开户名称</text>
					<input v-if="from.cardtype == 1" v-model="from.username" type="text" placeholder="请输入开户姓名" />
					<input v-if="from.cardtype == 2" v-model="from.username" type="text" placeholder="请输入开户姓名" />
					<!-- <input v-if="from.cardtype==1" v-model="userinfo.truename" :disabled="inputDisabled" type="text" placeholder="请输入开户姓名">
					<input v-if="from.cardtype==2" v-model="from.username" :disabled="inputDisabled" type="text" placeholder="请输入开户姓名"> -->
				</view>
				<view class="li">
					<text>开户账户</text>
					<input v-model="from.idcard" type="text" placeholder="请输入银行卡号" />
				</view>
				<view class="li">
					<text>开户银行</text>
					<input v-model="from.bankname" type="text" placeholder="请输入开户行" />
				</view>
				<!-- <view class="li">
					<text>所属银行</text>
					<view class="box">
						<picker :value="type" @change="bankChange" mode="selector" range-key="bankName" :range="bankList">
							<text v-if="nowBank['bankName']">{{ nowBank['bankName'] }}</text>
							<text class="error" v-else>请选择银行</text>
						</picker>
					</view>
					<m-icon size="28" type="icon-youjiantou_huaban"></m-icon>
				</view> -->
				<!-- 	<view class="li">
					<text>开户行</text>
					<input v-model="from.bankname" type="text" placeholder="请输入开户行" />
				</view> -->
				<view class="li">
					<text>电话号码</text>
					<input v-model="from.phone" type="text" placeholder="请输入电话号码" />
				</view>
				<!-- <view class="li">
					<text>设默认</text>
					<switch :checked="from.isDefault" color="#FA2B47" style="transform: scale(0.7)" @change="switchChange" />
				</view> -->
			</view>
		</m-block>

		<view class="btn-box" slot="footer">
			<m-button @click="verify">提交</m-button>
			<!-- <m-button @click="Jump('/pages/mine/information/information')" v-else>未实名，前往认证</m-button> -->
		</view>
		<m-dialog :isShow="isShow" title="提示" :showCancel="true" @handleConfirm="setBankCard" @handleCancel="isShow = false">
			<view class="hint" style="text-align: center">请反复确认提交的信息</view>
		</m-dialog>
	</m-layout2>
</template>

<script>
import { addEditBank, banklist } from '@/api/Users.js';
import { mobile } from '@/libs/fn/verify.js'; // 引入验证工具库
const BIN = require('bankcardinfo');
import { mapState } from 'vuex';
export default {
	data() {
		return {
			bankCardNo: '',
			isShow: false,
			bankShow: false,
			bankList: [],
			type: 1,
			from: {
				id: 0,
				userid: 0,
				username: '',
				idcard: '',
				bankname: '',
				cardtype: 1, //  1个人账户 2对公账户
				phone: ''
				// bankUserMobile: '',
				// isDefault: false,
			},
			nowBank: {},
			inputDisabled: false
		};
	},
	computed: {
		...mapState({
			bankCardList: (state) => state.user.bankCardList,
			userinfo: (state) => state.user.userinfo,
			userBackList: (state) => state.user.userBackList,
			backSelf: (state) => state.user.backSelf,
			backPublic: (state) => state.user.backPublic
		})
	},
	onLoad({ cardtype, type }) {
		// console.log(this.from)
		this.from.cardtype = cardtype;
		this.type = type;
		if (cardtype == 1) {
			this.from.id = this.backSelf.id || 0;
			this.from.idcard = this.backSelf.idcard || '';
			this.from.bankname = this.backSelf.bankname || '';
			this.from.username = this.backSelf.username || '';
			this.from.phone = this.backSelf.phone || '';
			this.inputDisabled = false;
		}
		if (cardtype == 2) {
			this.from.id = this.backPublic.id || 0;
			this.from.idcard = this.backPublic.idcard || '';
			this.from.bankname = this.backPublic.bankname || '';
			this.from.username = this.backPublic.username || '';
			this.inputDisabled = false;
		}
	},
	methods: {
		// 设置默认
		switchChange({ detail: { value } }) {
			console.log(value);
			this.from.isDefault = value;
		},
		async init(bankCardNo) {
			const { success, list } = await banklist();
			this.bankList = list;

			let find = '';
			if (bankCardNo) {
				find = this.bankCardList.find((item) => {
					return item.bankCardNo == bankCardNo;
				});
			}
			if (find) {
				this.from = { ...find };
				console.log(this.from);
				let type = this.bankList.find((item) => {
					return item.bankCode == find.bankCode;
				});
				this.nowBank = { ...type };
			}
		},
		async verifyName() {
			if (!this.idcard) {
				return this.Toast('请填写银行卡号');
			}
			BIN.getBankBin(this.idcard, async (err, data) => {
				if (err) {
					this.Toast('未查询到该银行卡所属银行');
				}
				if (!err) {
					console.log(data);
					// 6214832314616210
				}
			});
		},
		async setBankCard() {
			this.from.bankCode = this.nowBank.bankCode;
			// if(this.from.cardtype==1){
			// 	this.from.username=this.userinfo.truename
			// }
			const { success, msg } = await addEditBank(this.from);
			if (success) {
				this.Toast('操作成功');
				setTimeout(() => {
					this.Jump();
				}, 500);
			}
		},
		verify() {
			if (!this.from.username) return this.Toast('请输入姓名');
			if (!this.from.idcard) return this.Toast('请输入银行卡号');
			if (!this.from.phone) return this.Toast('请输入预留手机号');
			if (!mobile(this.from.phone)) return this.Toast('手机号格式错误');
			this.isShow = true;
		}
	}
};
</script>

<style lang="scss">
.bank-card {
	.head {
		padding-top: 20rpx;
		background: #fff;
		text-align: center;
	}

	.ul {
		background: #fff;
		padding: 50rpx 0 0;

		.li {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx 0rpx;

			text {
				display: block;
				width: 180rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.box {
				flex: 1;

				.error {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #908080;
				}
			}

			input {
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
			}
		}

		.li + .li {
			border-top: 1rpx solid #eeeeee;
		}
	}
}

.btn-box {
	padding: 30rpx 24rpx;
	box-sizing: border-box;
}

.picker-box {
	padding: 60rpx 0;
	background: #fff;
}
</style>
